import { StyleSheet, Text, View } from 'react-native'
import React, { useState, createRef } from 'react'
import Swiper from '../../components/Swiper'
import Tabs from '../../components/Tabs/Tabs'
import TopicItem from '../../components/TopicItem'

const Home = () => {
  const [current, setCurrent] = useState('');
  const [tabIndex, setTabIndex] = useState(1)
  const swiperRef = createRef()
  const [list, setList] = useState([{
    id: 1,
    title: '驾驶机动车应该随身携带哪种证件？',
    type: '选择题',
    answer: 'A',
    select: {
      A: '工作证',
      B: '身份证',
      C: '驾驶证',
      D: '职业资格证'
    }
  },
  {
    id: 2,
    title: '2.驾驶机动车应该随身携带哪种证件？',
    type: '选择题',
    answer: 'A',
    select: {
      A: '工作证',
      B: '身份证',
      C: '驾驶证',
      D: '职业资格证'
    }
  },
  {
    id: 3,
    title: '3.驾驶机动车应该随身携带哪种证件？',
    type: '选择题',
    answer: 'A',
    select: {
      A: '工作证',
      B: '身份证',
      C: '驾驶证',
      D: '职业资格证'
    }
  }])
  const tabs = [
    {
      id: 1,
      name: 'tab1'
    },
    {
      id: 2,
      name: 'tab2'
    },
    {
      id: 3,
      name: 'tab3'
    }
  ]
  // 下一屏
  const onIndexChanged = (e) => {
    console.log(e)
  }

  const tabChange = (index) => {
    console.log(index)
    console.log(swiperRef.scrollBy)
    console.log(swiperRef.current.scrollBy)
    // swiperRef.current.scrollBy(index, true)
    setTabIndex(index)
  }
  return (
    <View style={styles.container}>
      <Tabs list={tabs} current={tabIndex} change={tabChange}></Tabs>
      <Swiper index={tabIndex} onIndexChanged={tabChange} ref={swiperRef}>
        {
          tabs.map(tab => {
            return (
              <Swiper horizontal={false} onIndexChanged={onIndexChanged} key={tab.name}>
                {
                  list.map((item, index) => {
                    return (
                      <View style={styles.slide} key={item.id}>
                        <TopicItem data={item} index={index}></TopicItem>
                      </View>
                    )
                  })
                }
              </Swiper>

            )
          })
        }
      </Swiper>
    </View>
  )
}

export default Home

const styles = StyleSheet.create({
  container: {
    flex: 1
  },

  wrapper: {},
  slide: {
    flex: 1,
    justifyContent: 'center',
    // alignItems: 'center',
    // backgroundColor: '#9DD6EB'
  }
})